<template>
	<view>
		<view class="top_box">
			<view :class="duiShow ? 'one_box' : 'one_box1'" @tap="duiBtn">
				<view>已拒提</view>
			</view>
			<view :class="zengShow ? 'two_box' : 'two_box1'" @tap="zengBtn">
				<view>已赠送</view>
			</view>
			<view :class="faShow ? 'three_box' : 'three_box1'" @tap="faBtn">
				<view>已提货</view>
			</view>
			<view :class="fhShow ? 'four_box' : 'four_box1'" @tap="fhBtn">
				<view>已反悔</view>
			</view>
		</view>
		<template v-if="duihuanList.length < '1' && num == 1">
			<view class="emptya flex-column flex-c-c">
				<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
					<image style="width: 100%; height: 100%;"
						src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png" mode="">
					</image>
					<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">暂无商品～快去抽取心动盲盒吧</view>
				</view>
			</view>
		</template>
		<template v-else>
			<scroll-view class="bot_big_box" v-show="duihuan" scroll-y="true" @scrolltolower="lower1()"
				refresher-enabled="true" :refresher-triggered="triggeredDh" @refresherrefresh="onRefreshDh">
				<view class="bot_box" v-for="item, index in duihuanList" :key="index" @click="dhParticulars(item)">
					<!-- <view class="top_time_box">
						<view class="maghe_name_box">{{ item.title }}</view>
						<view class="create_time_box">创建时间：{{ item.exchange_time | formatDate('-') }}</view>

					</view> -->
					<view class="zhongjian_box">


						<view class="left_box">
							<view class="dengji_box_tl">
								<image :src="item.level_icon" mode=""></image>
							</view>
							<image :src="item.prize_icon" mode=""></image>
						</view>
						<view class="right_box">
							<view class="maghe_name_box">{{ item.title }}</view>
							<view class="one_txt">
								{{ item.prize_name }}
							</view>
							<view class="two_txt">

							</view>
							<view class="thr_txt">
								<text style="float: left;">价值：{{ item.price }}/大王币{{ item.recovery_price }}</text>
								<text style="float: right;">x{{ item.num }}</text>
							</view>
							<view class="create_time_box">创建时间：{{ item.exchange_time | formatDate('-') }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-if="zengsongList.length < '1' && num == 2">
			<view class="emptya flex-column flex-c-c">
				<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
					<image style="width: 100%; height: 100%;"
						src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png" mode="">
					</image>
					<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">暂无商品～快去抽取心动盲盒吧</view>
				</view>
			</view>
		</template>
		<template v-else>
			<scroll-view scroll-y="true" class="bot_big_box" v-show="zengsong" @scrolltolower="lower2()"
				refresher-enabled="true" :refresher-triggered="triggeredZs" @refresherrefresh="onRefreshZs">
				<view class="bot_box" v-for="(item, index) in zengsongList" :key="index" @tap="ExchangeClick(item)">
					<!-- <view class="top_time_box">
						<view class="maghe_name_box">{{ item.title }}</view>
						<view class="create_time_box">创建时间：{{ item.give_time }}</view>
					</view> -->
					<view class="zhongjian_box">
						<view class="left_box">
							<view class="dengji_box_tl">
								<image :src="item.level_icon" mode=""></image>
							</view>
							<image :src="item.prize_icon" mode=""></image>
						</view>
						<view class="right_box">
							<view class="maghe_name_box">{{ item.title }}</view>
							<view class="one_txt">
								{{ item.prize_name }}
							</view>
							<view class="two_txt">

							</view>
							<view class="thr_txt">
								<text style="float: left;">价值：￥{{ item.price }}/大王币{{
									item.recovery_price }}</text> <text style="float: right;">x{{item.num }}</text>
							</view>
							<view class="create_time_box">创建时间：{{ item.give_time }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-if="fahuoList.length < '1' && num == 3">
			<view class="emptya flex-column flex-c-c">
				<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
					<image style="width: 100%; height: 100%;"
						src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png" mode="">
					</image>
					<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">暂无商品～快去抽取心动盲盒吧</view>
				</view>
			</view>
		</template>
		<template v-else>
			<scroll-view class="bot_big_box" v-show="fahuo" scroll-y="true" @scrolltolower="lower3()"
				refresher-enabled="true" :refresher-triggered="triggeredFh" @refresherrefresh="onRefreshFh">



				<view class="bot_box" v-for="item, index in fahuoList" :key="index" @tap="shippingDetails(item)">
					<!-- <view class="top_time_box">
						<view class="maghe_name_box">{{ item.title }}</view>
						<view class="create_time_box">创建时间：{{ item.apple_send_time }}</view>

					</view> -->
					<view class="zhongjian_box">


						<view class="left_box">
							<view class="dengji_box_tl">
								<image :src="item.level_icon" mode=""></image>
							</view>
							<image :src="item.prize_icon" mode=""></image>
						</view>
						<view class="right_box">
							<view class="maghe_name_box">{{ item.title }}</view>
							<view class="one_txt">

								{{ item.prize_name }}
							</view>
							<view class="two_txt">

							</view>
							<view class="thr_txt">
								<text style="float: left;">价值：￥{{ item.price }}/大王币{{
									item.price }}</text> <text style="float: right; ">x{{ item.num }}</text>
							</view>

							<view class="create_time_box">创建时间：{{ item.apple_send_time }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-if="fanhuiList.length < '1' && num == 4">
			<view class="emptya flex-column flex-c-c">
				<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
					<image style="width: 100%; height: 100%;"
						src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png" mode="">
					</image>
					<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">暂无商品～快去抽取心动盲盒吧</view>
				</view>
			</view>
		</template>
		<template>
			<scroll-view class="bot_big_box" v-show="fanhui" scroll-y="true" @scrolltolower="lower4()"
				refresher-enabled="true" :refresher-triggered="triggeredFanhui" @refresherrefresh="onRefreshFanhui">
				<view class="bot_box" v-for="item, index in fanhuiList" :key="index" @tap="goRetraction(item)">
					<!-- <view class="top_time_box">
						<view class="maghe_name_box">{{ item.box_name }}</view>
						<view class="create_time_box">创建时间：{{ item.back_time }}</view>
					</view> -->
					<view class="zhongjian_box">
						<view class="left_box">
							<view class="dengji_box_tl">
								<image :src="item.level_icon" mode=""></image>
							</view>
							<image :src="item.prize_icon" mode=""></image>
						</view>
						<view class="right_box">
							<view class="maghe_name_box">{{ item.box_name }}</view>
							<view class="one_txt">
								{{ item.prize_name }}
							</view>
							<view class="two_txt">

							</view>
							<view class="thr_txt">
								<text style="float: left;">价值：￥{{ item.price }}/大王币{{ item.recovery_price }}</text> <text
									style="float: right;">x{{ item.num }}</text>
							</view>

							<view class="create_time_box">创建时间：{{ item.back_time }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
	</view>
</template>
<script>
export default {
	props: ['duihuanList'],
	data() {
		return {
			num: 1,
			duiShow: true, // 已拒提
			zengShow: false, // 已赠送
			faShow: false, // 已发货
			fhShow: false, // 已发货
			page: 1,
			zengsongList: [],//赠送
			fahuoList: [],//发货
			fanhuiList: [],//反悔
			zengsong: false,
			duihuan: true,
			fahuo: false,
			fanhui: false,
			triggered: false,
			triggeredZs: false,
			triggeredDh: false,
			triggeredFh: false,
			triggeredFanhui: false,
			allNums: '',
			pages: 1,
			zengsongpage: 1,//赠送分页
			fanhuiPage: 1,//反悔分页
			fahuoPage: 1,//发货分页
			zengsongYeshu: '',
			isDown: false,
			fahuoNums: '',
			flag: true,//发货分页防抖

		}
	},
	filters: {
		// 时间戳处理
		formatDate: function (value, spe = '/') {
			value = value * 1000
			let data = new Date(value);
			let year = data.getFullYear();
			let month = data.getMonth() + 1;
			let day = data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			month = month >= 10 ? month : "0" + month;
			day = day >= 10 ? day : "0" + day;
			h = h >= 10 ? h : "0" + h;
			mm = mm >= 10 ? mm : "0" + mm;
			s = s >= 10 ? s : "0" + s;
			return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
		}
	},
	onShow() {
		this.pages = 1
		this.duiBtn()
	},
	methods: {

		// 已拒提盒子点击
		dhParticulars(item) {
			////console.log('已拒提item:', item)
			uni.navigateTo({
				url: '/userPage/user/order/shopDetails?orderId=' + item.order_id + "&ydhType=" + 1 + "&titleType=" + item.title + "&isDuhuan=" + 0
			})
		},
		// 已赠送盒子点击
		ExchangeClick(item) {
			////console.log('已赠送item:', item)
			uni.navigateTo({
				url: '/userPage/user/order/shopDetails?orderId=' + item.order_id + "&ydhType=" + 2 + "&shouzengType=" + item.title + "&isDuhuan=" + 1
			})
		},
		// 已发货盒子点击
		shippingDetails(item) {
			////console.log('已发货item', item)
			uni.navigateTo({
				url: '/userPage/user/order/shopDetails?orderId=' + item.order_id + "&yfhType=" + 1 + "&isDuhuan=" + 1 + "&ydhType=" + 4//yfhType=1:发货样式
			})
		},
		// 已反悔盒子点击
		goRetraction(item) {
			////console.log('已反悔item', item)
			uni.navigateTo({
				url: '/userPage/user/order/shopDetails?orderId=' + item.order_id + "&ydhType=" + 3 + "&shouzengType=" + item.title + "&isDuhuan=" + 2
			})
		},
		// 拒提下拉
		onRefreshDh() {
			this.$parent.page1 = 1
			this.triggeredDh = true
			this.$parent.duihuanList = []
			this.$parent.yBtn()
			setTimeout(() => {
				this.triggeredDh = false
			}, 10)
			// this.triggered = true
			// // this.$parent.yBtn()
			// setTimeout(() => {
			// 	this.triggered = false
			// }, 10)
		},
		// 赠送下拉
		onRefreshZs() {
			this.zengsongpage = 1
			this.triggeredZs = true
			this.zengsongList = []
			this.zengBtn()
			setTimeout(() => {
				this.triggeredZs = false
			}, 10)
		},
		// 发货下拉
		onRefreshFh() {
			this.fahuoPage = 1
			this.triggeredFh = true
			this.fahuoList = []
			this.faBtn()
			setTimeout(() => {
				this.triggeredFh = false
			}, 10)
		},
		// 已反悔下拉
		onRefreshFanhui() {
			this.fanhuiPage = 1
			this.triggeredFanhui = true
			this.fanhuiList = []
			this.fhBtn()
			setTimeout(() => {
				this.triggeredFanhui = false
			}, 10)
		},
		lower1() {
			this.$parent.lower1()
		},
		// 赠送上拉
		lower2() {
			if (this.flag) {
				this.zengBtn()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none',
				})
			}
		},
		// 发货上拉
		lower3() {
			if (this.flag) {
				this.faBtn()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none',
				})
			}
		},
		lower4() {
			if (this.flag) {
				this.fhBtn()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none',
				})
			}
		},
		// 已拒提
		duiBtn() {
			this.zengsongList = []
			this.fanhuiList = []
			this.fahuoList = []
			this.zengsongpage = 1
			this.fahuoPage = 1
			this.fanhuiPage = 1
			this.page = 1
			this.num = 1
			this.fhShow = false
			this.zengsong = false
			this.fahuo = false
			this.duihuan = true
			this.duiShow = true
			this.zengShow = false
			this.faShow = false
			this.fanhui = false
		},
		// 已赠送
		zengBtn() {
			this.fanhuiList = []
			this.fahuoList = []
			// this.$parent.duihuanList = []
			this.fahuoPage = 1
			this.fanhuiPage = 1
			this.num = 2
			this.fhShow = false
			this.duihuan = false
			this.zengsong = true
			this.fahuo = false
			this.zengShow = true
			this.duiShow = false
			this.faShow = false
			this.fanhui = false
			let data = {
				page: this.zengsongpage
			}
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.order.giveOrderList, data).then(res => {
				uni.hideLoading()
				var zengsongList = res.data.list;
				this.zengsongpage++;
				this.zengsongList = this.zengsongList.concat(zengsongList)
				if (zengsongList.length < 10) {
					this.flag = false
				} else {
					this.flag = true
				}
				// this.zengsongList = res.data.list

			})
		},
		// 已发货
		faBtn() {
			this.zengsongList = []
			// this.$parent.duihuanList = []
			this.fanhuiList = []
			this.zengsongpage = 1
			this.fanhuiPage = 1
			this.num = 3
			this.fhShow = false
			this.faShow = true
			this.zengShow = false
			this.duiShow = false
			this.zengsong = false
			this.duihuan = false
			this.fahuo = true
			this.fanhui = false
			let data = {
				page: this.fahuoPage,
			}
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.order.deliverList, data).then(res => {
				uni.hideLoading()
				var fahuoList = res.data.list;
				this.fahuoPage++;
				this.fahuoList = this.fahuoList.concat(fahuoList)
				if (fahuoList.length < 10) {
					this.flag = false
				} else {
					this.flag = true
				}
			})
		},
		fhBtn() {
			this.zengsongList = []
			// this.$parent.duihuanList = []
			this.fahuoList = []
			this.zengsongpage = 1
			this.fahuoPage = 1
			this.num = 4
			this.fhShow = true
			this.faShow = false
			this.zengShow = false
			this.duiShow = false
			this.zengsong = false
			this.duihuan = false
			this.fahuo = false
			this.fanhui = true
			let data = {
				page: this.fanhuiPage,
			}
			uni.showLoading({
				title: "加载中..."
			})
			this.$Request.get(this.$api.order.getBackList, data).then(res => {
				uni.hideLoading()
				var fanhuiList = res.data.list;
				this.fanhuiPage++;
				this.fanhuiList = this.fanhuiList.concat(fanhuiList)
				if (fanhuiList.length < 10) {
					this.flag = false
				} else {
					this.flag = true
				}
				// this.fanhuiList = this.fanhuiList.concat(res.data.list)
			})
		},
	}
}
</script>
<style scoped lang="scss">
.top_box {
	/* #ifdef APP-PLUS */
	width: 80%;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	width: 600rpx;
	/* #endif */
	height: 70rpx;
	margin-left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.one_box {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;
		border: 1rpx solid #FF9F00;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
		border-radius: 50rpx;


	}

	.one_box1 {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;


	}

	.two_box {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
		border: 1rpx solid #FF9F00;
		border-radius: 50rpx;


	}

	.two_box1 {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;


	}

	.three_box {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
		border: 1rpx solid #FF9F00;
		border-radius: 50rpx;


	}

	.three_box1 {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;


	}

	.four_box {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
		border: 1rpx solid #FF9F00;
		border-radius: 50rpx;

	}

	.four_box1 {
		width: 136rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		position: relative;

	}

}

.bot_big_box {
	height: calc(100vh - 218rpx);
	overflow: hidden;
	overflow: auto;

	.bot_box1 {
		width: 98%;
		height: 274rpx;
		margin: auto;
		border-radius: 20rpx;
		display: flex;
		// border: 2rpx solid #3EC2FF;
		background: #FFFFFF;
		margin-top: 30rpx;

		.top_time_box {
			margin-top: 20rpx;
			padding-left: 32rpx;
			width: 100%;
			padding-top: 12rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 34rpx;
		}

		.zhongjian_box {
			height: 178rpx;
			width: 92%;
			// background-color: #fff;
			display: flex;
			margin: auto;
			margin-top: 34rpx;
			justify-content: space-between;
			align-items: center;

			.left_box {
				width: 178rpx;
				height: 178rpx;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				border: 1rpx solid #5191FF;
				position: relative;

				.dengji_box_tl {
					position: absolute;
					left: 10rpx;
					top: 5rpx;
					width: 96rpx;
					height: 52rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right_box {
				width: 70%;
				height: 100%;

				.one_txt {
					margin-top: 10rpx;
					width: 350rpx;
					height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				.two_txt {
					margin-top: 25rpx;
					width: 100%;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FA2929;
					line-height: 40rpx;
				}

				.thr_txt {
					margin-top: 25rpx;
					width: 400rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FA2929;
					line-height: 40rpx;
				}
			}
		}

		.bot_txt_box {
			width: 92%;
			height: 56rpx;
			margin: auto;
			margin-top: 15rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.71);
			line-height: 28rpx;
		}
	}

	.bot_box {
		width: 98%;
		height: 260rpx;
		background: rgba(255, 231, 192, 0.1);
		margin: auto;
		border-radius: 20rpx;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(101, 101, 101, 0.09);
		border: 1rpx solid #FED187;
		margin-top: 30rpx;

		.top_time_box {
			margin-top: 20rpx;
			padding-left: 32rpx;
			width: 100%;
			height: 80rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 80rpx;
			border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
			display: flex;
			justify-content: space-between;
		}

		.zhongjian_box {
			height: 178rpx;
			width: 92%;
			// background-color: #fff;
			display: flex;
			margin: auto;
			margin-top: 34rpx;
			justify-content: space-between;
			align-items: center;

			.left_box {
				width: 178rpx;
				height: 178rpx;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				border: 1rpx solid #FED187;
				position: relative;

				.dengji_box_tl {
					position: absolute;
					left: 10rpx;
					top: 5rpx;
					width: 96rpx;
					height: 52rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right_box {
				width: 70%;
				height: 100%;

				.maghe_name_box {
					margin-top: 10rpx;
					width: 80%;
					height: 36rpx;
					font-size: 32rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 36rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.create_time_box {
					width: 100%;
					height: 28rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #ffffff;
				}

				.one_txt {
					margin-top: 16rpx;
					width: 350rpx;
					height: 38rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 38rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.two_txt {
					width: 100%;
					height: 38rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 38rpx;
				}

				.thr_txt {
					width: 400rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFAE2A;
					line-height: 0;
				}
			}
		}

		.bot_txt_box {
			width: 92%;
			height: 56rpx;
			margin: auto;
			margin-top: 15rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.71);
			line-height: 28rpx;
		}
	}
}
</style>
